<template>
  <div class="materialpurchase">
    <div class="exception-top">
      <a-form-model layout="inline" :model="page" :colon="false">
        <a-form-model-item label="物资名称">
          <a-input v-model="page.name" placeholder="请输入物资名称" allowClear/>
        </a-form-model-item>
        <a-form-model-item>
          <a-button type="primary" @click="searchFn">搜索</a-button>
        </a-form-model-item>
      </a-form-model>
      <a-button type="primary" @click="addTreeFn">添加</a-button>
    </div>
    <div class="exception-content">
      <my-table :data-source="tableData" :pagination="false" :rowKey="record=> record.id">
        <a-table-column title="序号" align="center" :ellipsis="true" width="120px" :customRender="(text, record, index) =>(page.current - 1) * page.size + index + 1"/>
        <a-table-column title="物资名称" data-index="name" align="center" :ellipsis="true" />
        <a-table-column title="规格型号" data-index="specModel" align="center" :ellipsis="true" />
        <a-table-column title="存货编码" data-index="code" align="center" :ellipsis="true" />
        <a-table-column title="单位" data-index="unit" align="center" :ellipsis="true" width="150px"/>
        <a-table-column title="操作" align="center" width="200px">
          <template slot-scope="text,record,index">
            <div class="handle">
              <a-button size="small" type="primary" @click="editFn(record,index)">修改</a-button>
              <a-button size="small" type="danger" @click="delFn(record.id)">删除</a-button>
            </div>
          </template>
        </a-table-column>
      </my-table>
    </div>
    <div class="exception-bottom clearfix">
      <div class="page-box">
        <a-pagination :show-total="total => `共 ${total} 条记录`" v-model="page.current" :total="total" :defaultPageSize="page.size" :item-render="itemRender" hideOnSinglePage @change="pagechangeFn" />
      </div>
    </div>
    <!-- 添加弹框 -->
    <a-modal v-model="addPop" width="50%" :title="title" centered @ok="formSubFn" @cancel="()=>form = {}" :confirm-loading="confirmLoading" :maskClosable="false" destroyOnClose>
      <a-form-model ref="formrules" :rules="formrules" :model="form" :label-col="labelCol" :wrapper-col="wrapperCol" :colon="false">
        <a-form-model-item label="物资名称" prop="name">
          <a-input v-model.trim="form.name" placeholder="请输入物资名称"/>
        </a-form-model-item>
        <a-form-model-item label="规格型号" prop="specModel">
          <a-input v-model.trim="form.specModel" placeholder="请输入规格型号"/>
        </a-form-model-item>
        <a-form-model-item label="计量单位" prop="unit">
          <a-input v-model.trim="form.unit" placeholder="请输入计量单位"/>
        </a-form-model-item>
        <a-form-model-item label="存货编码" prop="code">
          <a-input v-model.trim="form.code" placeholder="请输入存货编码"/>
        </a-form-model-item>
      </a-form-model>
<!--      <template slot="footer">-->
<!--        <a-button type="primary" @click="formSubFn">确定</a-button>-->
<!--      </template>-->
    </a-modal>
  </div>
</template>

<script>
export default {
name: "MaterialPurchase",
  data(){
    return{
      title: "",
      addPop: false, // 弹窗是否显示
      confirmLoading:false,
      tableData: [], // 表格数据
      page: {
        // 分页数据查询
        current: 1,
        size: 10,
        name: "",
      },
      labelCol: { span: 4 },
      wrapperCol: { span: 16 },
      form: {
        // 弹窗添加表单数据
        name: "",
        specModel: "",
        code: "",
        unit:"",  // 计量单位
      },
      // 表单验证
      formrules: {
        name: [{required: true, message: "物资名称必填", trigger: "blur",},],
        specModel:[{required: true, message: "规格型号必填", trigger: "blur",},],
        code:[{required: true, message: "存货编码必填", trigger: "blur",},],
        unit:[{required: true, message: "单位必填", trigger: "blur",},],
      },
      total: 0,
    }
  },
  methods:{
    searchFn() {
      // 搜索按钮方法
      this.page.current = 1;
      this.getData();
    },
    addTreeFn() {
      // 添加按钮方法
      this.title = "添加采购物资";
      this.addPop = true;
    },
    editFn(record) {
      // 修改按钮方法
      this.title = "修改采购物资";
      this.form = record;
      this.addPop = true;
    },
    delFn(id) {
      let _that = this;
      this.$confirm({
        title: "是否确认删除?",
        onOk() {
          _that.$api.sparePartsRemoveById(id).then((res) => {
            console.log(res);
            if (res.data.data === true) {
              _that.$message.info("删除成功");
              _that.getData();
            }else {
              _that.$message.warning(res.data.errorMessage);
            }
          });
        },
        onCancel() {
          console.log("Cancel");
        },
        class: "delk",
      });
    },
    formSubFn() {
      // 弹窗确定按钮方法
      this.$refs.formrules.validate((valid) => {
        if (valid) {
          this.confirmLoading = true;
          if (this.title === "添加采购物资"){
            this.$api.sparePartsSave(this.form).then(res=>{
              console.log(res.data)
              if(res.data.code === 0){
                this.confirmLoading = false;
                this.form = {};
                this.getData();
                this.addPop = false;
                this.$message.info("添加成功！")
              }else {
                this.$message.warning(res.data.errorMessage);
                this.confirmLoading = false;
              }
            })
          }else {
            this.$api.sparePartsUpdateById(this.form).then(res=>{
              if(res.data.code === 0){
                this.confirmLoading = false;
                this.form = {};
                this.getData();
                this.addPop = false;
                this.$message.info("修改成功！")
              }else {
                this.$message.warning(res.data.errorMessage);
                this.confirmLoading = false;
              }
            })
          }
        }
      });
    },
    // 分页方法
    itemRender(current, type, originalElement) {
      if (type === "prev") {
        return <a>上一页</a>;
      } else if (type === "next") {
        return <a>下一页</a>;
      }
      return originalElement;
    },
    pagechangeFn(page, pageSize) {
      this.page.current = page;
      this.getData();
    },
    getData() {
      this.$api.sparePartsFindByPage(this.page).then((res) => {
        if (res.data.code == 0) {
          this.tableData = res.data.data;
          this.total = res.data.total;
        }
      });
    },
  },
  mounted() {
    this.getData()
  }
}
</script>

<style scoped lang="scss">
.materialpurchase{
  width: 100%;
  height: 100%;
  padding: 1%;
  box-sizing: border-box;
  .exception-top {
    width: 100%;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .exception-content {
    width: 100%;
    height: calc(94% - 60px);
    .handle{
      display: flex;
      justify-content: space-around;
    }
  }
  .exception-bottom {
    width: 100%;
    .page-box {
      float: right;
    }
  }
}
</style>